import classNames from "classnames"
import * as React from "react"
import { HTMLAttributes } from "react"
import { prefixClassName } from "../style"

import "./index.scss"

interface TextProps extends HTMLAttributes<HTMLSpanElement> {
  type?: "secondary" | "warning" | "danger"
}

function Text(props: TextProps) {
  const { type, children } = props
  return (<span className={classNames(prefixClassName("typography"), {
    [classNames(prefixClassName("typography-secondary"))]: type === "secondary",
    [classNames(prefixClassName("typography-warning"))]: type === "warning",
    [classNames(prefixClassName("typography-danger"))]: type === "danger",
  })}>{children}</span>)
}

interface TitleProps extends HTMLAttributes<HTMLSpanElement> {
  level?: 1 | 2 | 3 | 4
}

function Title(props: TitleProps) {
  const { level = 1, children } = props
  return React.createElement(`h${level}`, {
    children,
    className: classNames(prefixClassName("typography")),
  })
}


export default class Typography {
  public static Text = Text
  public static Title = Title
}
